import useLazyImage from '@/hooks/useLazyImage';

interface LazyImageProps {
    src: string;
    alt?: string;
    placeholder?: string;
    width?: string | number;
    height?: string | number;
}

/**
 * 延迟加载图片组件
 *
 * @param props 组件属性
 * @param props.src 图片的源地址
 * @param props.alt 图片的替代文本，默认为空字符串
 * @param props.placeholder 图片加载前的占位符，默认为空字符串
 * @returns 返回延迟加载的图片组件 使用示例：<LazyImage src="https://example.com/image.jpg" alt="Lazy Loaded" placeholder="placeholder.jpg" />
 */
const LazyImage = (props: LazyImageProps) => {
    const { src, alt = '', placeholder = '', width = 'auto', height = 'auto' } = props;
    const [imgRef, loadedSrc] = useLazyImage(src);

    return (
        <img
            ref={imgRef}
            src={loadedSrc || placeholder}
            alt={alt}
            style={{ width, height, transition: 'opacity 0.5s' }}
        />
    );
};

export default LazyImage;
